﻿
<?php
       // Configuración de los elementos del formulario ---- Tanto el nombre del usuario como el título devuelven el texto sin formato.
       $nombre_usuario = trim(strip_tags($_POST['nombre']));
       $cuerpo_post = $_POST['mensaje'];
       $titulo_entrada = trim(strip_tags($_POST['titulopost']));
	   
	   // Convertimos todo a UTF8 si nuestros headers no funcionan (Para poder usar tildes y ñ)
	   $nombre_usuario = utf8_decode($nombre_usuario);
	   $cuerpo_final = utf8_decode($cuerpo_final);
	   $titulo_entrada = utf8_decode($titulo_entrada);
	   
	   // Usamos strip_tags para permitir sólamente algunas etiquetas, si alguna otra existe dentro del código, ésta se suprimirá y dejará el contenido ---- No incluyas las etiquetas <SCRIPT> ni <STYLE> por una cuestión de seguridad.
	   $cuerpo_seguro = strip_tags($cuerpo_post, '<p><a><br><b><u><i><ul><ol><li><span><img><blockquote><h1><h2><h3><h4><h5><h6><strike><stroke><div><font><input><button>');
	   
	   $nombre_con_tags="<span class=\"post-autor\"> Escrito por:".$nombre_usuario."</span>";
	   
	   $cuerpo_final = $nombre_con_tags ."<div class=\"post-body-enviado\">".$cuerpo_seguro."</div>";
	   
	   
	   
       // CONFIGURACIÓN DE TUS CUENTAS DE CORREO -- REQUERIDO
       $tu_mail2blogger = 'The_S992010.teclado@blogger.com'; // Inserta aquí tu correo Mail2Blogger
	   $headers = 'MIME-Version: 1.0' . "\r\n";
       $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";

       // SALIDA DEL MAIL Y SU FORMATO
	   
	   
		if (isset ($_POST['enviar'])) { // Evitamos con esto que se autoenvíe al cargar la página, la cond. se lanza al presionar en enviar

		if (mail($tu_mail2blogger, $titulo_entrada, $cuerpo_final, $headers)) {
			echo("<p id=\"mensaje-enviado\">!Gracias por tu post! &Eacute;ste aparecer&aacute; en el &iacute;ndice dentro de unos segundos.</p>");
		} else {
			echo("<p id=\"mensaje-error\">Hubo un error al intentar publicar tu post, intenta después.</p>");
		}
		}  

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>		
<title>Publicar en el blog - Sistema creado por Víctor para Ayuda Bloggers</title>

<style type="text/css">
body {font-family:Open Sans;font-weight:300;color:#666;font-size:12px;background:url("") repeat scroll 0 0 #EEEEEE;}
table{width:90%;margin:0 auto;}
table td {max-width:300px;}
input[type=text], textarea {border: 1px solid #D9D9D9;width:97%;border-radius: 4px 4px 4px 4px;box-shadow: 0 1px 0 #FFFFFF;line-height: 25px;color:#555;resize: none;font-family: Open Sans;outline: medium none;font-weight:300;padding: 5px 10px;}
#mensaje-error, .mensaje-error {color:white;padding:10px;font-size:13px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.2) inset;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.45);background-color:#a41616;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#d12121,EndColorStr=#a41616);background-image:-moz-linear-gradient(top,#d12121 0,#a41616 45px);background-image:-ms-linear-gradient(top,#d12121 0,#a41616 45px);background-image:-o-linear-gradient(top,#d12121 0,#a41616 45px);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d12121),color-stop(45px,#a41616));background-image:-webkit-linear-gradient(top,#d12121 0,#a41616 45px);background-image:linear-gradient(to bottom,#d12121 0,#a41616 45px)}
#mensaje-enviado {color:white;padding:10px;font-size:13px;margin:0 auto 20px auto;box-shadow:0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.2) inset;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.45);background-color:#547446;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#21d18d,EndColorStr=#547446);background-image:-moz-linear-gradient(top,#21d18d 0,#547446 45px);background-image:-ms-linear-gradient(top,#21d18d 0,#547446 45px);background-image:-o-linear-gradient(top,#21d18d 0,#547446 45px);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#21d18d),color-stop(45px,#547446));background-image:-webkit-linear-gradient(top,#21d18d 0,#547446 45px);background-image:linear-gradient(to bottom,#21d18d 0,#547446 45px)}
input[type=submit] {border: 0;color: #fff;display: inline-block;font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;height: 32px;background-color: #267cc2;padding: 0 24px !important;	position: relative;text-align: center;text-decoration: none;text-shadow: 0 1px 0 rgba(0,0,0,.25);white-space: nowrap;-ms-border-radius: 2px;border-radius: 2px;box-shadow: 0 2px 1px rgba(0,0,0,.19999999999999996),inset 0 -1px 0 rgba(0,0,0,.19999999999999996),inset 0 1px 0 0 rgba(255,255,255,.19999999999999996);background-color: #267cc2;background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));background-image: -webkit-linear-gradient( #42a5e1, #267cc2);background-image: -moz-linear-gradient( #42a5e1, #267cc2);background-image: -ms-linear-gradient( #42a5e1, #267cc2);background-image: -o-linear-gradient( #42a5e1, #267cc2);background-image: linear-gradient( #42a5e1, #267cc2);-moz-transition-property: -moz-box-shadow,-webkit-box-shadow,box-shadow,line-height;-webkit-transition-property: -moz-box-shadow,-webkit-box-shadow,box-shadow,line-height;transition-property: -moz-box-shadow,-webkit-box-shadow,box-shadow,line-height;-moz-transition-duration: .2s,.2s,.2s,.2s;-webkit-transition-duration: .2s,.2s,.2s,.2s;transition-duration: .2s,.2s,.2s,.2s }
input[type=submit]:hover {-webkit-box-shadow: 0 4px 1px rgba(0,0,0,.19999999999999996),inset 0 -3px 0 rgba(0,0,0,.19999999999999996);-moz-box-shadow: 0 4px 1px rgba(0,0,0,.19999999999999996),inset 0 -3px 0 rgba(0,0,0,.19999999999999996);box-shadow: 0 4px 1px rgba(0,0,0,.19999999999999996),inset 0 -3px 0 rgba(0,0,0,.19999999999999996);text-decoration: none !important;} 
input[type=submit]:active, input[type=submit]:focus {-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19999999999999996),inset 0 12px 24px 6px rgba(0,0,0,.19999999999999996),inset 0 0 2px 2px rgba(0,0,0,.19999999999999996);-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19999999999999996),inset 0 12px 24px 6px rgba(0,0,0,.19999999999999996),inset 0 0 2px 2px rgba(0,0,0,.19999999999999996);box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19999999999999996),inset 0 12px 24px 6px rgba(0,0,0,.19999999999999996),inset 0 0 2px 2px rgba(0,0,0,.19999999999999996);-moz-transition-duration: .1s,.1s,.1s,.1s;-webkit-transition-duration: .1s,.1s,.1s,.1s;transition-duration: .1s,.1s,.1s,.1s }
</style>

</head>


<body>


<form onsubmit="return validar(this);" action="?" method="post"> 
<table>
<tr>
<td><label for="nombre">Usuario : </label></td>
<td><input name="nombre" size="50" type="text">  </td>
<td><span class="mensaje-error" id="mensaje-error1" style="visibility:hidden;float:right;padding:2px;">Mín. 4 Car&aacute;cteres</span>
</td>
</tr>
<tr>
<td><label for="titulopost">Título: </label></td>
<td><input id="titulo" name="titulopost" size="50" type="text"></td>
<td><span class="mensaje-error" id="mensaje-error2" style="visibility:hidden;float:right;padding:2px;">Mín. 10 Car&aacute;cteres</span>
</td>
</tr>
 
<tr>
<td><label for="mensaje">Post : </label></td>
<td><textarea  name="mensaje" cols="31" rows="5"></textarea></td>
<td><span class="mensaje-error" id="mensaje-error3" style="visibility:hidden;float:right;padding:2px;">Mín. 20 Carácteres</span></td>
</tr>

<tr>
<td></td>
<td><input name="enviar" value="Publicar" id="send" onClick="runTest(this.form, this)" type="submit">
</td>
</tr>
</table>
 </form>
 


<script type="text/javascript">
/*****Este script fué añadido para poder validar el formulario 
y así prevenir que los usuarios puedan enviar inputs vacíos.
*****/
	function validar(validador) {
		if (validador.nombre.value.length < 4) { 
			validador.nombre.focus();
			document.getElementById('mensaje-error1').style.visibility = 'visible';
			return false;
		}
		else {
			document.getElementById('mensaje-error1').style.visibility = 'hidden';
		}
  
  
		if (validador.titulopost.value.length < 10) {
			document.getElementById('mensaje-error2').style.visibility = 'visible';
			validador.titulopost.focus();
			return false;
		}
		else {
			document.getElementById('mensaje-error2').style.visibility = 'hidden';
		}
		
		if (validador.mensaje.value.length < 20) { 
			validador.mensaje.focus();
			document.getElementById('mensaje-error3').style.visibility = 'visible';
			return false;
		}
		else {
			document.getElementById('mensaje-error3').style.visibility = 'hidden';

		}
			return true;
	};
</script>
</body>
</html>